<template>
	<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear" style="z-index: 99999999 !important;">
		<uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
		  />
		<!-- <uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
			<view class="uni-popup__wrapper-box" @click.stop="clear">
				<slot />
			</view>
		</uni-transition> -->
		<scroll-view scroll-y="true" style="position: fixed;top: 17%;left: 10%; z-index: 99999999 !important;height: 65vh;width: 70%;background-color: #fff;border-radius: 20upx;padding: 5%;">
			<view style="text-align: center;font-size: 38upx;font-weight: 550;">
				亿人荟用户注册协议
			</view>
			<view style="text-indent: 2em;line-height: 58upx;margin-top: 30upx;font-size: 24upx;">
				本协议是您与亿人荟网站（简称“本站”，网址: <text @click="towangzhan" style="color: #007AFF;text-decoration: underline;">http://www.yirenhuigroup.com</text>）所有从业者之间就从业相关事宜所订立的协议，在注册前请您仔细阅读如下服务条款：您确认本协议后，本协议即在您和本站之间产生法律效力。请您务必在注册之前认真阅读全部服务协议内容，如有任何疑问，可向本站咨询。 无论您事实上是否在注册之前认真阅读了本服务协议，只要您点击协议下方的"同意以下协议，提交"按钮并按照本站注册程序成功注册为从业者，您的行为仍然表示您同意并签署了本协议，本协议即构成对双方有约束力的法律文件。
				<view style="text-indent: 0em;">
					第一条 从业者身份的确立和保证
				</view>
				<view class="">
					1·从业者承诺并保证自己是具有完全民事行为能力和完全民事权利能力的自然人、法人、实体和组织。从业者在此保证所填写的信息是真实、准确、完整、及时的，并且没有任何引人误解或者虚假的陈述，且保证本站可以通过从业者所填写的联系方式与从业者取得联系。
				</view>
				<view class="">
					2·从业者应根据本站对于相关服务的要求及时提供相应的身份证明等资料，否则本站有权拒绝向该从业者提供相关服务或注销该从业者账号。
				</view>
				<view class="">
					3·从业者承诺将及时更新其真实信息以维持该等信息的有效性。
				</view>
				<view class="">
					4·如果从业者提供的资料或信息包含有不正确、不真实的信息，本站保留取消从业者资格并随时结束为该从业者提供服务的权利。
				</view>
				<view class="">
					5·以从业者身份代理其他自然人或者单位进行注册从业资格必须向本站提供代理人和被代理人的详细资料和信息及书面授权文件，未向我站提供上述资料信息及文件的，本站将视注册者为从业者。
				</view>
				<view style="text-indent: 0em;">
					第二条 从业者身份确认
				</view>
				<view class="">
					1·当从业者成功注册亿人荟并购买ADKK产品后将得到一个用户名和密码，从业者凭用户名名和密码享受本站向其从业提供的产品知识及从业服务。
				</view>
				<view class="">
					2·从业者将对用户名和密码安全负全部责任，并且从业者对以其用户名进行的所有活动和事件负全责。从业者有权根据本站规定的程序修改密码。
				</view>
				<view class="">
					3·非经本站书面同意，用户名和密码不得擅自转让或者授权他人使用，否则从业者应承担由此造成的一切后果。
				</view>
				<view class="">
					4·从业者若发现任何非法使用其用户名或存在安全漏洞的情况，请立即通告本站。
				</view>
				<view style="text-indent: 0em;">
					第三条 从业者的权利
				</view>
				本站直接将所有数据明晰化、透明化，直接锁定未来消费，从业者开始从业，便享有以下权利：
				<view class="">
					1·成功注册后将获得如下权利：
				</view>
				<view class="">
					①通过免费注册可获得对亿人荟公司，产品，从业活动的全方位了解；
				</view>
				<view class="">
					②可以购买产品体验；
				</view>
				<view class="">
					③分享产品获取分享津贴；
				</view>
				<view class="">
					④分享从业机会获取分享津贴；
				</view>
				<view class="">
					⑤多劳多得的创业平台；
				</view>
				<view class="">
					⑥七日内对从业活动或产品有选择放弃的权利（未启封的原包装方可）；
				</view>
				<view class="">
					⑦可以在C2C商城选购优质商品的机会。
				</view>
				<view class="">
					2·邀请其他企业、产品上架C2C商城成为商家的权利。
				</view>
				<view style="text-indent: 0em;">
					第四条 进军资本市场
				</view>
				<view class="">
					1·若亿人荟生物科技有限公司挂牌或上市，公司将根据引流的数量，对应相应的股权，在亿人荟生物科技有限公司挂牌或上市，从业者所引流数据对应的股权开具期权兑换证明，该期权兑换证明可以兑换相应股权。
				</view>
				<view class="">
					2·从业者清楚且同意，因为亿人荟生物科技有限公司挂牌或上市因国家政策及对股东人数的限制，公司将指定1000家分公司作为股权代持人，该1000家分公司从绩优分公司中进行考评选择产生，其余从业者的股权将全部由这1000家分公司代持，届时公司将协助各方应另行签订相关股权代持协议。
				</view>
				<view class="">
					3·从业者清楚且同意，若从业者之间私下就期权达成的相关协议，由各方自行处理，与公司无关，但任何处理方式不得违反法律法规的强制性规定。
				</view>
				<view class="">
					4·从业者清楚且同意，若亿人荟生物科技有限公司挂牌上市时，公司将无条件服从中介机构的安排，进行股权划分和股东安排，以避免影响乙方挂牌上市。若影响到从业者股权持有方式的，从业者表示同意并支持。
				</view>
				<view class="">
					5·从业者清楚且同意，本协议的通证换股权行为对亿人荟生物科技有限公司发展或挂牌上市造成影响的，从业者同意并支持无条件配合，由此给从业者造成的损失的，从业者表示认同并自行承担。
				</view>
				<view class="">
					6·从业者清楚且同意，亿人荟生物科技有限公司将按照约定，为从业者开具相关期权证明，期权证明只为表明从业者与公司之间的关系，在亿人荟生物科技有限公司未挂牌上市前，该期权证明并不表明从业者直接与亿人荟生物科技有限公司存在股权合同关系，从业者表示同意并支持。
				</view>
				<view class="">
					7·从业者清楚且同意，公司在自己的互联网平台上或线下地推时，已就亿人荟生物科技有限公司与从业者之间的合作关系及股权持有关系的性质，向从业者作了清楚说明。同时：
				</view>
				<view class="">
					8·对于亿人荟生物科技有限公司拟挂牌上市事宜，存在国家政策、制度障碍、不可抗力，经营效应、意外事件等各种无法预测的保证的因素，因此，对于挂牌上市的确切时间、方式也存在各种不确定性。
				</view>
				<view class="">
					8·1·若公司指定受让的股东人员超过1000家，超过部分应通过股权代持或是其他方式间接持有股权。
				</view>
				<view class="">
					9·从业者清楚且同意，亿人荟生物科技有限公司股权持有的商业模式系按照公司约定进行的商业模式创新，对于各种新型商业模式，不排除存在政府有关部门或司法机关要求自证合法、或对商业模式论证考核，在此情况下，亿人荟生物科技有限公司有权随时终止本股权赠与条款，待政策确认之后，再根据政策要求实施相关股权行为。亿人荟生物科技有限公司终止本股权赠与行为不应被视为违约，从业者表示同意并支持。
				</view>
				<view class="">
					10·从业者清楚且同意，按照国家政策要求，暂停股权赠与行为、或股权赠与条款无效或撤销后，不应视为之前亿人荟生物科技有限公司代理协议有瑕疵。从业者无权要求公司返还购买产品款项，从业者表示同意并支持。
				</view>
				<view style="text-indent: 0em;">
					第五条 服务条款的修改和服务体系修订
				</view>
				<view class="">
					本站有权在必要时修改服务条款，本站服务条款一旦发生变动，将会在重要页面上提示修改内容。如果不同意所改动的内容，从业者可以主动取消获得的网络服务。如果从业者继续享用本站网络服务，则视为接受服务条款的变动。本站保留随时修改其服务体系和价格而不需通知会员的权利，本站修改其服务和价格体系之前会员就具体服务与本站达成协议并已按照约定交纳费用的，本站将按照已达成的协议执行至已交纳费用的服务期期满。
				</view>
				<view style="text-indent: 0em;">
					第六条 我站的权利和义务
				</view>
				<view class="">
					1·本站应根据从业者选择的服务以及购买产品款项的情况向从业者提供合格的网络技术和信息服务。
				</view>
				<view class="">
					2·本站承诺对从业者资料采取对外保密措施，不向第三方披露从业者资料，不授权第三方使用从业者资料，除非：依据本协议条款或者从业者与本站之间其他服务协议、合同、在线条款等规定可以提供； 依据法律法规的规定应当提供；行政、司法等有执法权部门要求本站提供； 从业者同意本站向第三方提供；本站解决举报事件、提起诉讼而提交的；本站为防止严重违法行为或涉嫌犯罪行为发生而采取必要合理行动所必须提交的；本站为向从业者提供产品、服务、信息而向第三方提供的，包括本站通过第三方的技术及服务向从业者提供产品、服务、信息的情况。
					
				</view>
				<view class="">
					3·本站有权使用从业者资料，如：照片、录音、视频资料等。
				</view>
				<view class="">
					4·本站有权利对从业者进行审查并决定是否接受从业者成为本站从业资格。
				</view>
				<view class="">
					5·本站保留在从业者违反国家、地方法律法规规定或违反本在线注册条款的情况下终止为从业者提供服务并终止其用户名的权利，并且在任何情况下，本站对任何间接、偶然、特殊及继起的损害不负责任。
				</view>
				<view style="text-indent: 0em;">
					第七条 服务的终止
				</view>
				<view class="">
					1·从业者有权随时申请终止其从业资格或其在本站申请的一项或多项服务，但已消费款项不得要求退还。
				</view>
				<view class="">
					2·本站有权根据实际情况决定取消为从业者提供的一项或多项服务，但应退还从业者为该服务所交产品款项的未消费部分，除此之外本站不承担任何责任。
				</view>
				<view class="">
					3·从业者申请成为本站从业者后应当遵守本站不时作出的关于反垃圾邮件的决议，从业者承诺不会利用本站的服务进行任何涉及垃圾邮件的行为，包括但不限于从业者利用本站服务器发送垃圾邮件；从业者发送垃圾邮件中包含本站服务器或IP地址的相关信息；从业者所有的网站中包含出售邮件列表、邮件地址搜索软件、邮件群发软件等支持垃圾邮件服务的内容；从业者发送的垃圾邮件中包含其在本站注册域名信息等可能使国内及国际反垃圾邮件组织认为本站或本站会员与垃圾邮件事件有关的内容或信息。会员理解一旦发生垃圾邮件事件将对本站及其所有从业者造成不可挽回的巨大损失，因此本站发现从业者有涉及垃圾邮件的行为将立即停止为该从业者提供任何服务，无论从业者在本站享有的服务是收费或者免费亦无论该服务是否直接与发送垃圾邮件的行为相关，本站有权在从业者涉及垃圾邮件事件时取消该从业者的本站从业资格并保留对因从业者涉及垃圾邮件给本站造成损失索赔的权利。
				</view>
				<view style="text-indent: 0em;">
					第八条 争议解决及法律适用
				</view>
				<view class="">
					1·因本服务条款有关的一切争议，双方当事人应通过友好协商方式解决。如果协商未成，双方同意向亿人荟所在地人民法院解决。
				</view>
				<view class="">
					2·注册条款的效力、解释、履行和争议的解决均适用中华人民共和国法律法规和计算机、互联网行业的规范。
				</view>
				<view style="text-indent: 0em;">
					第九条 不可抗力
				</view>
				<view class="">
					1·因不可抗力或者其他意外事件，使得本条款履行不可能、不必要或者无意义的，遭受不可抗力、意外事件的一方不承担责任。
				</view>
				<view class="">
					2·不可抗力、意外事件是指不能预见、不能克服并不能避免且对一方或双方当事人造成重大影响的客观事件，包括但不限于自然灾害如洪水、地震、瘟疫流行和风暴等以及社会事件如战争、动乱、政府行为等。
				</view>
				<view class="">
					3·不可抗力、意外事件是指不能预见、不能克服并不能避免且对一方或双方造成重大影响的客观事件，包括但不限于自然灾害如洪水、地震、瘟疫流行和风暴等以及社会事件如战争、动乱、政府行为等。
				</view>
				<view class="">
					4·从业者同意鉴于互联网的特殊性，黑客攻击、互联网连通中断或者系统故障等属于不可抗力，由此给从业者或者第三方造成的损失不由本站承担。
				</view>
				<view style="text-indent: 0em;">
					第十条 附则
				</view>
			<view class="">
					1·本注册条款中有关条款若被权威机构认定为无效，不应影响其他条款的效力，也不影响本服务条款的解释、违约责任及争议解决的有关约定的效力。
			</view>
				<view class="">
					2·一方变更通知、通讯地址或其他联系方式，应自变更之日起及时将变更后的地址、联系方式通知另一方，否则变更方应对此造成的一切后果承担责任。从业者同意，本站的有关通知只需在我站有关网页上发布即视为送达从业者。
				</view>
				<view class="">
					3·因本站上市、被收购、与第三方合并、名称变更等事由，从业者同意本站可以将其权利和义务转让给相应的本站权利、义务的承受者。
					从业者在此再次保证已经完全阅读并理解了上述从业者注册条款并自愿正式进入我站用户在线注册程序，接受上述所有条款的约束。
				</view>
			</view>
			<view style="width: 50%;margin-left: 25%;height: 80upx;background-color: #007AFF;border-radius: 40upx;text-align: center;line-height: 80upx;color: #fff;margin-top: 50upx;" @click="xieyi">
				同意此协议
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniTransition from '../uni-transition/uni-transition.vue'
	import popup from './popup.js'
	/**
	 * PopUp 弹出层
	 * @description 弹出层组件，为了解决遮罩弹层的问题
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} type = [top|center|bottom] 弹出方式
	 * 	@value top 顶部弹出
	 * 	@value center 中间弹出
	 * 	@value bottom 底部弹出
	 * 	@value message 消息提示
	 * 	@value dialog 对话框
	 * 	@value share 底部分享示例
	 * @property {Boolean} animation = [ture|false] 是否开启动画
	 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
	 */

	export default {
		name: 'UniPopup',
		components: {
			uniTransition
		},
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			// message: 消息提示 ; dialog : 对话框
			type: {
				type: String,
				default: 'center'
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			}
		},
		provide() {
			return {
				popup: this
			}
		},
		mixins: [popup],
		watch: {
			/**
			 * 监听type类型
			 */
			type: {
				handler: function(newVal) {
					this[this.config[newVal]]()
				},
				immediate: true
			},
			/**
			 * 监听遮罩是否可点击
			 * @param {Object} val
			 */
			maskClick(val) {
				this.mkclick = val
			}
		},
		data() {
			return {
				duration: 300,
				ani: [],
				showPopup: false,
				showTrans: false,
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
				},
				transClass: {
					'position': 'fixed',
					'left': 0,
					'right': 0,
				},
				maskShow: true,
				mkclick: true,
				popupstyle: 'top'
			}
		},
		created() {
			this.mkclick = this.maskClick
			if (this.animation) {
				this.duration = 300
			} else {
				this.duration = 0
			}
		},
		methods: {
			clear(e) {
				// TODO nvue 取消冒泡
				e.stopPropagation()
			},
			open() {
				this.showPopup = true
				this.$nextTick(() => {
					new Promise(resolve => {
						clearTimeout(this.timer)
						this.timer = setTimeout(() => {
							this.showTrans = true
							// fixed by mehaotian 兼容 app 端
							this.$nextTick(() => {
								resolve();
							})
						}, 50);
					}).then(res => {
						// 自定义打开事件
						clearTimeout(this.msgtimer)
						this.msgtimer = setTimeout(() => {
							this.customOpen && this.customOpen()
						}, 100)
						this.$emit('change', {
							show: true,
							type: this.type
						})
					})
				})
			},
			close(type) {
				this.showTrans = false
				this.$nextTick(() => {
					this.$emit('change', {
						show: false,
						type: this.type
					})
					clearTimeout(this.timer)
					// 自定义关闭事件
					this.customOpen && this.customClose()
					this.timer = setTimeout(() => {
						this.showPopup = false
					}, 300)
				})
			},
			onTap() {
				if (!this.mkclick) return
				this.close()
			},
			xieyi(){
				this.onTap()
				this.$emit('xieyi')
			},
			towangzhan(){
				this.$emit('towangzhan')
			},
			/**
			 * 顶部弹出样式处理
			 */
			top() {
				this.popupstyle = 'top'
				this.ani = ['slide-top']
				this.transClass = {
					'position': 'fixed',
					'left': 0,
					'right': 0,
				}
			},
			/**
			 * 底部弹出样式处理
			 */
			bottom() {
				this.popupstyle = 'bottom'
				this.ani = ['slide-bottom']
				this.transClass = {
					'position': 'fixed',
					'left': 0,
					'right': 0,
					'bottom': 0
				}
			},
			/**
			 * 中间弹出样式处理
			 */
			center() {
				this.popupstyle = 'center'
				this.ani = ['zoom-out', 'fade']
				this.transClass = {
					'position': 'fixed',
					/* #ifndef APP-NVUE */
					'display': 'flex',
					'flexDirection': 'column',
					/* #endif */
					'bottom': 0,
					'left': 0,
					'right': 0,
					'top': 0,
					'justifyContent': 'center',
					'alignItems': 'center'
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uni-popup {
		position: fixed;
		/* #ifndef APP-NVUE */
		z-index: 99999;
		/* #endif */
	}

	.uni-popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $uni-bg-color-mask;
		opacity: 0;
	}

	.mask-ani {
		transition-property: opacity;
		transition-duration: 0.2s;
	}

	.uni-top-mask {
		opacity: 1;
	}

	.uni-bottom-mask {
		opacity: 1;
	}

	.uni-center-mask {
		opacity: 1;
	}

	.uni-popup__wrapper {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
	}

	.top {
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
	}

	.bottom {
		bottom: 0;
	}

	.uni-popup__wrapper-box {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: relative;
		/* iphonex 等安全区设置，底部安全区适配 */
		/* #ifndef APP-NVUE */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
	}

	.content-ani {
		// transition: transform 0.3s;
		transition-property: transform, opacity;
		transition-duration: 0.2s;
	}


	.uni-top-content {
		transform: translateY(0);
	}

	.uni-bottom-content {
		transform: translateY(0);
	}

	.uni-center-content {
		transform: scale(1);
		opacity: 1;
	}
</style>
